<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from '../../../common/http'
import { ApiUrl } from '../../../common/ApiUrl'
import NavBar from '../../components/NavBar.vue'

let remoteList = ref([]);
let state = reactive({
	navHeight: 0,
	params: {
		pageNum: 1,
		pageSize: 10,
	}
})

onShow(() => {
	// 获取场地管理数据
	getRemoteList();
})

const getRemoteList = () => {
	request({
		url: ApiUrl.WarnStockUrl,
		method: 'post',
		data: {
			...state.params
		}
	}).then(res => {
		remoteList.value = res.data.list;
		state.params.pageCount = res.data.pages;
	})
}
</script>

<template>
	<view class="remote_start">
		<NavBar v-model:navHeight="state.navHeight">
		  <template v-slot:center>
				<view class="search">
					<view class="input" style="width: 436rpx;">
						<image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
						<input placeholder="请输入场地名称/设备号/会员ID" />
					</view>
				</view>
			</template>
		</NavBar>
		<view class="remote_list">
			<view class="remote_item">
			  <view class="header">
			    <view class="name">机器编号：101191（广州阳光都市13栋203）</view>
			  </view>
			  <view class="body">
			    <view class="item">运营商：<text>张小红</text></view>
			    <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
			    <view class="item">到期时间：<text>2026-06-18</text></view>
			    <view class="item">运营状态：<text>运营</text></view>
			  </view>
			  <view class="footer">
			    <view class="action">
			      <button class="btn primary">远程启动</button>
			    </view>
			  </view>
			</view>
		</view>
	</view>
</template>

<style lang='scss'>
.remote_start {
	box-sizing: border-box;
	padding-top: calc(v-bind('state.navHeight') * 1px);
	background: #ffffff;
	padding-bottom: 20rpx;
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
				.search {
					width: 420rpx;
					.input {
						width: 420rpx;
					}
				}
			}
		}
	}
	.remote_list {
		.remote_item {
		  border-radius: 8rpx 8rpx 0 0;
			background: #ffffff;
			box-sizing: border-box;
			border-radius: 24rpx;
			margin: 24rpx 32rpx;
			width: 696rpx;
			.header {
			  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			  padding: 22rpx 0;
			  .name {
			    font-size: 28rpx;
			    font-weight: bold;
			    position: relative;
			    margin-left: 26rpx;
			    &:before {
			      content: '';
			      width: 6rpx;
			      height: 40rpx;
			      position: absolute;
			      left: -26rpx;
			      background: #FF4638;
			      border-radius: 3rpx 3rpx 3rpx 3rpx;
			    }
			  }
			}
			.body{
			  padding: 24rpx 32rpx 34rpx;
			  font-size: 24rpx;
			  display: flex;
			  flex-wrap: wrap;
			  row-gap: 12rpx;
			  box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			  color: #969699;
			  text {
			    color: #303030;
			  }
			  .item {
			    width: 50%;
			  }
			  .signal {
			    width: 28rpx;
			  }
			}
			.footer {
			  padding: 12rpx 32rpx;
			  display: flex;
			  .action {
			    margin-left: 30rpx;
			    flex: 1;
			    display: flex;
			    align-items: center;
			    justify-content: flex-end;
			  }
			}
		}
	}
}
</style>